<template>
	<view>
		<view class="navigationBar" :style="{height:device.navigationBarHeight+'px',paddingTop:device.statusBarHeight+'px'}" v-if="current==2||current == 3">
			<text>{{current == 2?'购物车':'我的'}}</text>
		</view>
		<template v-if="current == 0">
			<Home />
		</template>
		<template v-if="current == 1">
			<Store />
		</template>
		<template v-if="current == 2">
			<Car />
		</template>
		<template v-else-if="current == 3">
			<Mine />
		</template>
		<view class="tabbar" :style="{paddingBottom:device.isNotchScreen?28+'px':0}">
			<view class="item" @click="switchTab(0)">
				<image src="../static/icon/tabBar/ic_index.png" mode="" v-if="current==0"></image>
				<image src="../static/icon/tabBar/ic_index2.png" mode="" v-else></image>
				<text>首页</text>
			</view>
			<view class="item" @click="switchTab(1)">
				<image src="../static/icon/tabBar/ic_category.png" mode="" v-if="current==1"></image>
				<image src="../static/icon/tabBar/ic_category2.png" mode="" v-else></image>
				<text>分类</text>
			</view>
			<view class="item" @click="switchTab(2)">
				<image src="../static/icon/tabBar/ic_car.png" mode="" v-if="current==2"></image>
				<image src="../static/icon/tabBar/ic_car2.png" mode="" v-else></image>
				<text>购物车</text>
			</view>
			<view class="item" @click="switchTab(3)">
				<image src="../static/icon/tabBar/ic_mine.png" mode="" v-if="current==3"></image>
				<image src="../static/icon/tabBar/ic_mine2.png" mode="" v-else></image>
				<text>我的</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import Home from "@/custom-tab-bar/home.vue"
	import Store from "@/custom-tab-bar/store.vue"
	import Car from "@/custom-tab-bar/car.vue"
	import Mine from "@/custom-tab-bar/mine.vue"
	export default{
		components:{
			Home,
			Store,
			Car,
			Mine
		},
		computed: {
			...mapState(['device'])
		},
		data(){
			return {
				current:0
			}
		},
		onShow() {
			const token = uni.getStorageSync('token');
			console.log('token',token)
			if(!token){
				wx.reLaunch({
					url:'/pages/login/index'
				})
			}
		},
		
		methods:{
			switchTab(e){
				this.current = e
				
			},
		}
	}
</script>

<style lang="scss">
	.navigationBar{
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.tabbar{
		position: fixed;
		height: 90rpx;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-color: #fff;
		border-top: 2rpx solid #a1a1a1;
		width: 100%;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		
		.item{
			text-align: center;
			font-size: 28rpx;
			&>image{
				width: 48rpx;
				height: 48rpx;
				margin:0 auto 4rpx;
			}
		}
	}
</style>